<template>
<div>
            <el-form :model="form"  :rules="rules" ref="ruleFormRef">
      <el-row :gutter="24" >
        <el-col :span="6" >
          <el-form-item label="數量" prop="num"><el-input-number v-model="form.num" :min="1" /></el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="價格" prop="price"><el-input v-model="form.price" type="number"  :min="1" /> </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="使用期限(天)" prop="deadline"><el-input v-model="form.deadline" type="number"  :min="1" /> </el-form-item>
        </el-col>
        <el-col :span="4" >
                <el-form-item label="" >
                <el-button class="button" :color="ticketIndex ? '#F7B32B':'#50BC58'" icon="CircleCheck" @click="onSubmit(ruleFormRef)">{{ticketIndex?'修改':'確認'}}</el-button>
                </el-form-item>
         </el-col>
      </el-row>
    </el-form>
</div>
</template>

<script setup>
import { ref ,reactive, watch} from 'vue' 
const form = reactive({
    num: 1,
    price:1,
    deadline:1
});
const props = defineProps({
    showTicket:Object,
    showTicketIndex:[String,Number]
})
const ticketIndex = ref(1)
ticketIndex.value = props.showTicketIndex
Object.assign(form,props.showTicket)
console.log(ticketIndex.value);
watch(()=>props.showTicket,(newval)=>{
    Object.assign(form,newval)
})
watch(()=>props.showTicketIndex,(newval)=>{
    ticketIndex.value = newval
console.log(ticketIndex.value);
})
const emit = defineEmits(['addticket'])
const onSubmit = (formEl)=>{
      if (!formEl) return;
      formEl.validate(async (e)=>{
        if (e) {
          console.log(form);
          let a = {}
           emit('addticket',Object.assign(a,form),ticketIndex.value)
           resetForm()
            ticketIndex.value = ''
        }
    })
}
const resetForm = (formEl) => {
    ruleFormRef.value.resetFields()
}
const ruleFormRef = ref('')

const  rules = reactive({
        num:{required:true,message:'请输入套票數量',trigger: ['blur', 'change']},
        price:{required:true,message:'请输入套票金額',trigger: ['blur', 'change']},
        deadline:{required:true,message:'请输入使用期限',trigger: ['blur', 'change']},
    })
</script>

<style lang='less'  scoped>
.button{
    color: #fff;
}
</style>